<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" href="/stylesheets/bootstrap.css" />
  </head>
  <body>
  <%- include header %>
    <header class="book-header" style="background-image: url(images/book-banner.jpg);">
        <div class="container">
            <div class="row">
                <div class="col-sm-12"> 
                    <h3 style="opacity: 1;">电子书籍</h3>
                </div>
            </div>
        </div>
    </header>

	 <div class="row" id="book">
	 <% list.forEach(function(item,idx){ %>
	  <div class="col-sm-6 col-md-3 center">
	    <div class="thumbnail">
	      <div class="box"><a href="./book/bookdetail?id=<%= item.id %>"><img  src="/images/book-loading1.gif" data-original="<%= item.images.large %>" id="<%- item.id %>" /></a></div>
	      <div class="caption">
	      <p class="h4" style="width:185px;overflow: hidden;text-overflow: ellipsis;margin:0 auto;">《<a href="./book/bookdetail?id=<%= item.id %>" class="text-nowrap margin" ><%- item.title %></a>》</p>
	        <p style="width:185px;overflow: hidden;text-overflow: ellipsis;margin:0 auto;" class="text-nowrap">作者:<%- item.author %></p>
	      </div>
	    </div>
	  </div>
	  <% }) %>
	</div>


    <nav aria-label="..." class="container text-center">
      <ul class="pagination">
        <li class="">
          <a href="./book?pageNo=<%= pageNo > 1 ? parseInt(pageNo)-1: 1 %>">
              上一页
          </a>
        </li>
        <% for(var i=1;i<=totalPages;i++){ %>
             <li class="<%- i==pageNo? 'active':'' %>">
                <a href="./book?pageNo=<%= i %>" ><%- i %></a href="">
              </li>
        <%}%>
        <li class="">
          <span>
            <a aria-hidden="true" href="./book?pageNo=<%= pageNo < totalPages ? parseInt(pageNo)+1: totalPages %>">下一页</a>
          </span>
        </li>
      </ul>
    </nav>
    <%- include footer %>
    <script src="/javascripts/jquery-1.11.3.js"></script>
    <script src="/javascripts/jquery.lazyload.js"></script>
    <script src="/javascripts/bootstrap.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {
          $("img").lazyload({effect: "fadeIn",container:$('#book')});
      }); 
    </script>
  </body>
</html>
